<template>
  <div class="dc-container">
    <!-- 标题 -->
    <div v-if="showTitle" class="dc-container-title">
      <span @click="changeExpandDiv">
        <el-icon><CaretRight :class="titleIconClass" /></el-icon>
        {{ title }}
      </span>
      <div v-if="!isExpand" class="dc-container-summary">
        {{ summary }}
      </div>
    </div>

    <!--内容-->
    <div v-if="showContent" class="dc-container-content">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '面板容器'
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  expand: {
    type: Boolean,
    default: true
  },
  // 折叠摘要
  summary: {
    type: [String, Number, Object, Boolean],
    default: ''
  }
});

const isExpand = ref(props.expand);

const titleIcon = computed(() => 'iconfont_yapin');

const titleIconClass = computed(() => {
  if (isExpand.value) {
    return 'dc-container-title-down';
  }
  return 'dc-container-title-right';
});

const showContent = computed(() => {
  if (props.showTitle) {
    return isExpand.value
  }
  return true
});

const changeExpandDiv = () => {
  isExpand.value = !isExpand.value
}
</script>

<style lang="scss" scoped>
// ... existing style code ...
</style>